.details-msg-box {
	width: 100%;
	min-height: 100vh;
	padding: calc(var(--amplified_base) * 100rpx) 32rpx 100rpx;
	background-color: #fff;

	// 用户信息
	.works-users {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 48rpx;

		// 用户头像
		.works-users-avatar {
			width: 88rpx;
			height: 88rpx;
			flex-shrink: 0;
		}

		// 用户名字和时间
		.works-users-name_time {
			flex: 1;
			margin: 0 16rpx;

			.works-users-name {
				font-weight: 600;
				font-size: calc(var(--amplified_base) * 32rpx);
				color: #526a9b;
				line-height: calc(var(--amplified_base) * 38rpx);
			}

			.works-users-time {
				font-weight: 400;
				font-size: calc(var(--amplified_base) * 24rpx);
				color: #a1a1a1;
				line-height: calc(var(--amplified_base) * 28rpx);
				margin-top: 8rpx;
			}
		}

		//更多
		.works-users-more {
			height: 2em;
			min-width: 2em;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.more-icon {
			flex-shrink: 0;
			background-color: #666666;

			&::before {
				left: -10rpx;
			}
			&::after {
				right: -10rpx;
			}
		}
	}

	// 已点赞列表
	.works-star-list {
		background: #f7f7f7;
		border-radius: 8rpx;
		padding: 20rpx 16rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-weight: 600;
		font-size: calc(var(--amplified_base) * 28rpx);
		color: #526a9b;
		line-height: calc(var(--amplified_base) * 33rpx);

		.works-star-list-icon {
			width: calc(var(--amplified_base) * 32rpx);
			height: calc(var(--amplified_base) * 32rpx);
		}

		.works-star-item {
			margin-left: 16rpx;
		}
	}

	//作品的文字信息
	.works-content {
		margin-top: 16rpx;
		font-weight: 400;
		font-size: calc(var(--amplified_base) * 32rpx);
		color: #090909;
		line-height: calc(var(--amplified_base) * 38rpx);
		word-break: break-all;
	}

	// 作品的图片信息
	.works-imgs {
		margin-top: 16rpx;
		display: grid;
		gap: 16rpx; // 图片之间的间距
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(
			auto-fill,
			minmax(100px, auto)
		); /* 或设置固定高度 */

		.works-imgs-item {
			position: relative;
			width: calc(var(--amplified_base) * 223rpx);
			max-width: 700rpx;
			height: calc(var(--amplified_base) * 223rpx);
			border-radius: 8rpx;
		}

		.works-imgs-item__content {
			// pointer-events: none;
			max-width: 700rpx;
			width: calc(var(--amplified_base) * 223rpx);
			height: calc(var(--amplified_base) * 223rpx);
			border-radius: 8rpx;
		}

		.play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 0;
			height: 0;
			border-left: 30rpx solid #f4f4f4; /* 三角形的颜色 */
			border-top: 20rpx solid transparent;
			border-bottom: 20rpx solid transparent;
			cursor: pointer;
		}
	}

	// 地址 / 是否点赞
	.works-content-toolbar-container {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.works-content-toolbar-address {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: calc(var(--amplified_base) * 24rpx);
			color: #a1a1a1;
			line-height: calc(var(--amplified_base) * 28rpx);

			.works-content-toolbar-address-icon {
				width: calc(var(--amplified_base) * 32rpx);
				height: calc(var(--amplified_base) * 32rpx);
			}
		}

		.works-content-toolbar-tool {
			display: flex;
		}

		.works-content-toolbar-tool-item {
			width: calc(var(--amplified_base) * 48rpx);
			height: calc(var(--amplified_base) * 48rpx);
			margin-left: 32rpx;
		}
	}

	//评论
	.works-comments {
		line-height: 33rpx;

		.works-comments-item {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			padding: 24rpx 0;

			.works-comments_avatar {
				width: calc(var(--amplified_base) * 64rpx);
				height: calc(var(--amplified_base) * 64rpx);
				flex-shrink: 0;
			}
		}

		.works-comments_right {
			flex: 1;
			margin-left: 16rpx;

			.works-comments_right-top {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.works-comments_name {
					font-weight: 400;
					font-size: calc(var(--amplified_base) * 32rpx);
					color: #111;
					line-height: calc(var(--amplified_base) * 38rpx);
				}

				.works-comments_star {
					width: calc(var(--amplified_base) * 48rpx);
					height: calc(var(--amplified_base) * 48rpx);
				}
			}

			//回复内容
			.works-comments_content {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: calc(var(--amplified_base) * 28rpx);
				color: #515151;
				line-height: calc(var(--amplified_base) * 28rpx);
				word-break: break-all;

				.works-comments_content-reply-wrap,
				.works-comments_content-reply-text {
					display: inline-block;
				}

				.works-comments_content-reply-text {
					color: #526a9b;
				}
			}

			//回复时间
			.works-comments_date {
				font-weight: 400;
				font-size: calc(var(--amplified_base) * 24rpx);
				color: #515151;
				line-height: calc(var(--amplified_base) * 28rpx);
				margin-top: 16rpx;
			}
		}
	}
}

//评论框
:deep .comment-popup {
	background-color: #f4f4f4;
	padding: 32rpx 24rpx;
	display: flex;
	align-items: center;
	line-height: 1.5;

	.comment-textarea {
		flex: 1;
		min-height: 1.3em;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.uni-textarea-placeholder {
		line-height: 1.3;
	}

	.send-comment {
		flex-shrink: 0;
		margin-left: 16rpx;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		letter-spacing: 4rpx;
		background-color: #1677ff;
		color: #fff;
	}
}

//右上角的更多 在下方出现的弹出层
:deep .more-popup-2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 40rpx 0;

	.popup-more-item {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.more-popup--icon {
		margin: 0 16rpx 0 32rpx;
		width: calc(var(--amplified_base) * 48rpx);
		height: calc(var(--amplified_base) * 48rpx);
	}
}
